<template>
  <div id="rightcenter" class="progress-container" style="width: 100%; height: 100%;">
    <div class="progress" v-for="index in 6" :key="index"
      :style="{ 'width': 'calc(33.3% - 10px)', 'height': 'calc(45% - 10px)', 'margin': '5px' }">
      <div :id="'progressChart' + index" style="width: 100%; height: 80%;"></div>
      <div class="rank">
        <span>{{ emotionsLabels[index - 1] }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex';// Vuex 的一个辅助函数,映射state的变量
export default {
  name: "各省情感数据分析",
  data() {
    return {
      //全国
      defaultEmotionData: {
        '喜': 1609,
        '怒': 256,
        '哀': 1035,
        '乐': 456,
        '悲': 920,
        '思': 528
      }
    };
  },
  computed: {
    ...mapState(['selectedProvince']),
    ...mapGetters(['selectedEmotionData']),
    emotionsLabels() {
      return ['喜', '怒', '哀', '乐', '悲', '思'];
    },
    effectiveEmotionData() {
      return this.selectedProvince ? this.selectedEmotionData : this.defaultEmotionData;
    }
  },
  methods: {
    initProgressChart(chartId, provinceName) {
      const id = chartId.split('progressChart')[1]
      //console.log(id)
      const emotionData = this.effectiveEmotionData;

      //console.log(emotionData)
      let total = 0;
      const emotionsLabels = () => ['喜', '怒', '哀', '乐', '悲', '思'];
      total = Object.values(emotionData).reduce((sum, value) => {
        return sum + value;
      }, 0);
      //console.log('总和:', total);

      const percentages = Object.keys(emotionData).reduce((acc, key) => {
        acc[key] = ((emotionData[key] / total) * 100).toFixed(2);
        return acc;
      }, {});
      const emotionIndex = emotionsLabels()[id - 1];
      //console.log('百分比:', percentages);
      let option = {
        color: ["rgb(194, 204, 208)", "#FFFFFF80"], //  进度条颜色 进度条背景颜色
        series: [
          {
            name: "情感",
            type: "pie",
            startAngle: 315,
            radius: ["85%", "95%"],
            legendHoverLink: false,
            hoverAnimation: false,
            avoidLabelOverlap: false,
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: [
              {
                //this.selectedEmotionData[provinceName]
                value: percentages[emotionIndex],
                //name: '情感值',
                label: {
                  position: "center",
                  color: "#4e5d6c",
                  fontSize: 15,
                  formatter: `{c}%`
                },
              },
              {
                value: 100 - percentages[emotionIndex],
                name: '其他',
                label: {
                  show: false
                }
              }
            ],
          },
        ],
      };
      let myChart = this.$echarts.init(document.getElementById(chartId));
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    initProgressCharts() {
      for (let i = 1; i <= 6; i++) {
        this.initProgressChart('progressChart' + i, i - 1);
      }
    },

  },
  mounted() {
    this.initProgressCharts();//需要在组件挂载时立即初始化图表一次，以确保默认情感数据显示
    this.$watch('effectiveEmotionData', (newVal, oldVal) => {
      if (newVal) {
        this.initProgressCharts();
      }
    });
   
  },
  beforeDestroy() {
    for (let i = 1; i <= 6; i++) {
      let chart = echarts.getInstanceById('progressChart' + i);
      if (chart) {
        chart.dispose();
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.progress-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: flex-start;
  height: 100%;

  .rank {
    width: 50px;
    height: 25px;
    position: absolute;
    left: 50%;
    top: 145px;
    transform: translate(-50%);
    background: url("") no-repeat;
    background-size: 100% 100%;

    span {
      color: #787777;
      font-size: 18px;
      position: absolute;
      left: 50%;
      top: 1%;
      transform: translate(-50%);
    }
  }

}

.progress {
  //background: rgba(2, 15, 43, 0.7);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  margin: 1px;
}
</style>